<template>
	<div>
		<el-dialog
			title=""
			:visible.sync="dialogVisible"
			width="90%"
			:before-close="dialogClick"
		>
			<div class="flowBox">
				<div class="tableBar">
					<v-Tbfilter
						:tableColumns="flowItem"
						@tbChangeLie="tbChangeLie"
					></v-Tbfilter>

					<el-tooltip content="导出" placement="top" effect="dark">
						<download-excel
							class="downExcel"
							type="xls"
							:data="tableDataFn"
							:fields="tableDataFields"
							name="流量监控.xls"
						>
							<el-button
								class="btnExport"
								icon="el-icon-jk-export"
							>
							</el-button>
						</download-excel>
					</el-tooltip>
				</div>

				<el-table
					:data="dialogData"
					border
					v-loading="loading"
					element-loading-text="拼命加载中"
					element-loading-spinner="el-icon-loading"
				>
					<template v-for="item in flowItem">
						<el-table-column
							:key="item.label"
							:prop="item.prop"
							:label="item.label"
							v-if="item.isShow"
							:fit="true"
							align="center"
						>
							<template v-slot="scope">
								{{ scope.row[item.prop] }}
							</template>
						</el-table-column>
					</template>
				</el-table>
			</div>

			<span slot="footer" class="dialog-footer">
				<!-- <el-button @click="dialogClick">取 消</el-button> -->
				<!-- <el-button type="primary" @click="dialogClick">确 定</el-button> -->
			</span>
		</el-dialog>
	</div>
</template>
<script>
import bus from 'common/bus.js';
import { flowItem } from './dialogItem.js';
import vTbfilter from '../../common/toolbar/TbFilterColumn';

export default {
	props: {
		dialogVisible: Boolean,
		itemType: String,
		dialogData: Array,
	},
	watch: {
		flowItem: (n, o) => {
			// console.log('1');
		},
	},
	components: {
		vTbfilter,
	},
	computed: {
		tableDataFn() {
			
			return this.tableData.filter((item) => {
				// console.log(item)
				switch (item.TAG) {
					case 'HW':
						item.TAG = '华为';
						
						break;
					case 'CISCO':
						item.TAG = '思科';
						
						break;
					case 'OTHER':
						item.TAG = '其他';
						
						break;

					default:
						break;
				}

				return item;
			});
		},
		tableDataFields() {
			let _jsonfields = {};
			this.flowItem.filter((item) => {
				if (item.isShow) {
					_jsonfields[item.label] = item.prop;
				}
			});

			return _jsonfields;
		},
	},
	created() {
		// console.log(dialogData);
	},
	data() {
		return {
			flowItem: flowItem,
			loading: false,
			tableData: this.dialogData,

			// dialogDatabaseItem: dialogDatabaseItem,
			// dialogServerItem: dialogServerItem,
			// dialogInternetItem: dialogInternetItem,
		};
	},
	methods: {
		dialogClick() {
			this.$emit('haldDialogfalse');
		},
		tbChangeLie(val) {
			(this.loading = true), console.log(val);
			// 遍历表格列
			this.flowItem.map((item, index) => {
				// 列的显示隐藏状态改变
				item.isShow = val.includes(item.label);
			});
			console.log(this.flowItem);
			// this.flowItem=data
			this.loading = false;
		},
	},
};
</script>
<style scope>
.flowBox {
	width: 100%;
	/* background: red; */
}
.tableBar {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 10vw;
	justify-items: center;
	margin-bottom: 20px;
}
</style>
